<template>
  <j-modal
    title="AI预测分析"
    :width="800"
    switchFullscreen
    :fullscreen="false"
    :draggable="true"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleModalCancel"
    :cancelButtonProps="{ class: { 'jee-hidden': true } }"
    :visible="modalVisible"
    :body-style="{ padding: '0px' }"
    class="ai-sfk-modal"
  >
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false"   :head-style="{ height:'0px' }">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-item
          label="训练模板"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-select
            show-search
            placeholder="请选择训练模板"
            v-model="model.templateIds"
            v-decorator="['name', { rules: [{ required: true, message: '请选择训练模板' }] }]"
          >
            <a-select-option v-for="item in modelTemplateList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="槽号"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          :required="false"
        >
          <j-select-data-slot
            placeholder="请选择槽号"
            :multi="true"
            :buttons="false"
            v-model="model.slotIds"
          ></j-select-data-slot>
        </a-form-item>
        <a-form-item
          label="预测序列长度"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
          prop="predictNumber"
        >
          <a-input-number :style="{ width: 'calc(50% - 60px)' }" value="1" v-model="model.predictNumber" />
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" :loading="confirmLoading" @click="handleSubmit">预测</a-button>
          <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
        </a-form-item>
      </a-form-model>
      <a-modal :width="900" v-model="resultVisible" title="预测结果">
        <template>
          <a-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            bordered
            :columns="columns"
            :dataSource="resultList"
            class="j-table-force-nowrap"
          >
            <template slot="resultSlot" slot-scope="text">
              <a-tag
                v-for="tag in text"
                :key="tag"
                :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
              >
                {{ tag.toUpperCase() }}
              </a-tag>
            </template>
            <!-- <template slot="modelIdSlot" slot-scope="text">
            {{ getModelName(text) }}
          </template>
          <span slot="resultSlot" slot-scope="text">
            <a-tag
              v-for="tag in text"
              :key="tag"
              :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
            >
              {{ tag.toUpperCase() }}
            </a-tag>
          </span> -->
          </a-table>
        </template>
        <template slot="footer">
          <a-button @click="resultCancel">关闭</a-button>
        </template>
      </a-modal>
    </a-card>
  </j-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import JSelectDataSlot from '@/components/jeecgbiz/JSelectDataSlot2'
export default {
  name: 'PredictPlus',
  components: {
    JSelectDataSlot,
  },
  data() {
    return {
      modalVisible: false,
      confirmLoading:false,
      modelTemplateList: [],
      model: {
        templateIds: '',
        slotIds: '',
        predictNumber: '',
      },
      validatorRules: {
        predictNumber: [{ required: true, message: '请填写预测的天数!' }],
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },

        {
          title: '模型',
          dataIndex: 'model_name',
          align: 'center',
          width: 140,
        },
        {
          title: '槽号',
          dataIndex: 'slot_id',
          align: 'center',
          width: 140,
        },
        {
          title: '预测结果',
          dataIndex: 'result',
          align: 'center',
          width: 260,
          scopedSlots: { customRender: 'resultSlot' },
        },
        {
          title: '状态',
          dataIndex: 'message',
          align: 'center',
          width: 100,
        },
      ],
      confirmLoading: false,
      resultVisible: false,
      resultList: [],
    }
  },
  created() {
    this.loadModelTemplate()
  },
  methods: {
    show() {
      this.modalVisible = true
    },
    handleModalCancel() {
      this.modalVisible = false
    },
    loadModelTemplate() {
      getAction('/modelBase/template/list', { pageSize: 9999 })
        .then((res) => {
          if (res.success) {
            var dataSource = res.result.records
            for (let i = 0; i < dataSource.length; i++) {
              this.modelTemplateList.push({ id: dataSource[i].id, name: dataSource[i].name })
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    searchReset() {
      this.model.dataSoltIds = ''
      this.model.templateIds = ''
      this.model.predictNumber = ''
    },

    // handler
    handleSubmit() {
      let that = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          var param = {}
          param['templateIds'] = []
          param['predictNumber'] = that.model.predictNumber
          param['slotIds'] = that.model.slotIds
          param['templateIds'].push(that.model.templateIds)
          this.confirmLoading = true
          postAction('/modelBase/model/predictPlus', param).then((res) => {
            that.confirmLoading = false
            if (res.success) {
              that.resultVisible = true
              that.resultList = res.result
            } else {
              that.$message.error(res.message)
            }
            that.confirmLoading = false;
          })
        }
      })
    },
    resultCancel() {
      this.resultVisible = false
    },
  },
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
table:hover,
tr:hover,
thead:hover {
  background: #20293c !important;
}

.ai-sfk-modal {
  /deep/.ant-modal-content {
    background: transparent;
  }
  /deep/.ant-modal-footer {
    border: none;
  }
  /deep/.ant-modal-header,
  .ant-card,
  .ant-card-body {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    backdrop-filter: blur(20px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
    color: #ddd;
    border-bottom: 0px;
  }
  /deep/.ant-modal-title,
  /deep/.ant-modal-close {
    color: #ccc;
  }
  // /deep/.ant-modal-body {
  //   background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
  //   backdrop-filter: blur(20px); /* 背景模糊 */
  //   -webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
  // }
  /deep/.ant-table-tbody > tr.ant-table-row:hover > td,
  .ant-table-tbody > tr > td.ant-table-cell-row-hover,
  .ant-table-row-hover {
    background: #336;
  }
  /deep/.ant-table {
    background-color: #4c4d4d;
    height: 507px;
  }
  /deep/.ant-table-middle
    > .ant-table-content
    > .ant-table-scroll
    > .ant-table-body
    > table
    > .ant-table-thead
    > tr
    > th {
    background-color: #393939;
    color: #ddd;
  }
  /deep/.ant-table-middle
    > .ant-table-content
    > .ant-table-fixed-right
    > .ant-table-body-outer
    > .ant-table-body-inner
    > table
    > .ant-table-thead
    > tr
    > th {
    background: #333;
    color: #ddd;
  }
  /deep/.ant-table-bordered .ant-table-thead > tr > th,
  .ant-table-bordered .ant-table-tbody > tr > td {
    border-color: #747474;
  }
  /deep/.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td{
    color: #ddd;
  }
  /deep/.ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td{
    background-color: #393939;
  }
  /deep/.ant-table-bordered .ant-table-body > table {
    border-color: #747474;
  }
  /deep/.ant-table-tbody > tr > td {
    border-color: #747474;
  }
  /deep/.ant-table-placeholder{
    background: transparent;
    border: none;
    .ant-empty-description{
       color: #ddd;
    }
  }

  /deep/.ant-pagination {
    color: #fff;
    .ant-pagination-item a {
      color: #fff;
    }
    .ant-pagination-item-active a {
      color: #1890ff;
    }
    .ant-pagination-item-link {
      background: #ccc;
    }
  }
}
</style>